<!-- 
[flex布局 (弹性布局)]

- 容器的属性: 
    1. flex-flow = ['flex-direction','flex-wrap']的简写形式;
    2. justify-content: 在主轴上的对齐方式, (flex-start | flex-end | center | space-between | space-around);
    3. align-items: 在垂轴上的对齐方式, (flex-start | flex-end | center | strech(默认值,如果项目没有设置高度,则高度占满整个容器) | baseline);
    4. align-content: (垂轴上)多根轴线的对齐方式;如果只有一根轴线,这个属性就不起作用了;(flex-start,flex-end,center,strech,space-between,space-around);

- 项目的属性:
    1. order: 项目的排列顺序,默认为0,数值越小越靠前;
    2. flex-grow: 项目的放大比例,默认为0,(表示即使有剩余空间,也不放大);
    3. flex-shrink: 缩小比例,默认为1,(表示如果空间不足,项目将会缩小);
    4. flex-basis: 项目占据的固定空间;
    5. flex: (felx-grow,flex-shrink,flex-basis的简写,默认为0 1 auto);(注意不能加逗号)
        [1,1,auto:可放大可缩小; 0 0 auto: 不放大也不缩小]
    6. align-self: 单个属性的对齐方式,会覆盖align-items属性; (flex-start,flex-end,center,baseline,strech);

- 弹性元素的特征:
    1. 两个弹性元素的外边距不会发生塌陷或者折叠;
    2. 弹性元素设置浮动是无效的,但可以设置定位;

flex: 1; flex : 1,1,0;
 -->